<script setup>
import { PlusCircleOutlined, SearchOutlined, FilterOutlined } from '@ant-design/icons-vue';
import { useOrganizations } from "@/hooks/useOrganizations"
import { ref, onMounted, reactive, computed, watch, provide } from 'vue';
import { message } from 'ant-design-vue';
import { requireUserList, userImport } from "@/apis/organizationsManaging/unitManaging"
import { useFilterColumns } from "@/hooks/useFilterColumns"
import ImportStaff from "./components/ImportStaff.vue"
import Pagination from "@/components/Pagination/Pagination.vue"
const organizations = useOrganizations();
const filterCol = useFilterColumns();
provide('companyTreeData', organizations.companyTreeData);
const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
        width: 100,
    },
    {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
        width: 100,
    },
    {
        title: '性别',
        dataIndex: 'sex',
        align: 'center',
        width: 100,
    },
    {
        title: '学历',
        dataIndex: 'education',
        align: 'center',
        width: 100,
    },
    {
        title: '所属公司',
        dataIndex: 'company',
        align: 'center',
        width: 120,
    },
    {
        title: '所属一级部门',
        dataIndex: 'depart',
        align: 'center',
        width: 120,
    },
    {
        title: '所属二级部门 ',
        dataIndex: 'subdepart',
        align: 'center',
        width: 120,
    },
    {
        title: '岗位名称',
        dataIndex: 'job',
        align: 'center',
        width: 120,
    },
    {
        title: '电话号码',
        dataIndex: 'phone',
        align: 'center',
        width: 120,
    },
    {
        title: '证件类型',
        dataIndex: 'id_type_label',
        align: 'center',
        width: 120,
    },
    {
        title: '证件号',
        dataIndex: 'id_no',
        align: 'center',
        width: 120,
    },
    {
        title: '在职状态',
        dataIndex: 'type_label',
        align: 'center',
        width: 120,
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        fixed: 'right',
    },
];
const optionsWithDisabled = [
    {
        label: '序号',
        value: 'id',
    },
    {
        label: '姓名',
        value: 'name',
    },
    {
        label: '性别',
        value: 'sex',
    },
    {
        label: '学历',
        value: 'education',
    },
    {
        label: '所属公司',
        value: 'company',
    },
    {
        label: '所属一级部门',
        value: 'depart',
    },
    {
        label: '所属二级部门 ',
        value: 'subdepart',
    },
    {
        label: '岗位名称',
        value: 'job',
    },
    {
        label: '电话号码',
        value: 'phone',
    },
    {
        label: '证件类型',
        value: 'id_type_label',
    },
    {
        label: '证件号',
        value: 'id_no',
    },
    {
        label: '在职状态',
        value: 'type_label',
    },
    {
        label: '操作',
        value: 'operation',
    },
];
const total = ref(0);
const staffRef = ref(null)
const showKey = ref([])
const filterColumns = computed(() => {
    return columns.filter(item => showKey.value.indexOf(item.dataIndex) == -1)
})
const loading = ref(true)
const dataSource = ref([])
const formState = reactive({
    page: 1,
    size: 10,
    cid: "",
    depart_id: "",
    keyword: "",
});
watch(organizations.companyTreeData, (data) => {
    formState.cid = [data[0].id];
    getDataSource();
})
const getDataSource = () => {
    let obj = JSON.parse(JSON.stringify(formState))
    if (formState.cid) {
        if (formState.cid.length === 1) {
            obj.cid = formState.cid[0]
        } else {
            obj.cid = formState.cid[0]
            obj.depart_id = formState.cid[formState.cid.length - 1]
        }
    }
    requireUserList(obj).then(res => {
        console.log(res);
        if (res.code === 1) {
            dataSource.value = res.data.list;
            total.value = res.data.total;
            loading.value = false;
        } else {
            loading.value = false;
            dataSource.value = [];
            message.error(res.msg);
        }
    })
};
const getRoomList = () => {
    loading.value = true;
    getDataSource();
}
const handleFilterKey = () => {

}
const handleimport = () => {
    staffRef.value.open = true;
}
const changepage = (options) => {
    loading.value=true;
    formState.page = options.page;
    formState.size = options.pageSize;
    getDataSource();
}
</script>
<template>
    <!-- 人员管理 -->
    <div class="personnel-management warpper">
        <div class="search">
            <div>
                <a-cascader v-model:value="formState.cid" :options="organizations.companyTreeData.value"
                    :fieldNames="{ label: 'title', value: 'id', children: 'children' }" placeholder="请选择公司"
                    change-on-select />
            </div>&nbsp;
            <div>
                <a-input v-model:value="formState.keyword" placeholder="请输入员工名称\工号\手机号" />
            </div>&nbsp;
            <a-button type="primary" @click="getRoomList">
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>&nbsp;
            <div class="filter-key">
                <a-button type="primary" @click="handleFilterKey">
                    <template #icon>
                        <FilterOutlined />
                    </template>
                    过滤
                </a-button>
                <div class="select-fil">
                    <a-checkbox-group v-model:value="showKey" :options="optionsWithDisabled">
                        <!-- <template #label="{ label }">
                            <span>{{ label }}</span>
                        </template> -->
                    </a-checkbox-group>
                </div>
            </div>
            &nbsp;
            <a-button type="primary" @click="handleimport">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                批量导入员工
            </a-button>
        </div>
        <div class="personnel-container">
            <a-table :loading="loading" :columns="filterColumns" :data-source="dataSource" rowKey="id" :pagination="false"
                :scroll="{ x: 'max-content' }">
                <!-- y: tableHeight -->
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'sex'">
                        <div class="">
                            {{ text === 1 ? '男' : '女' }}
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operation'">
                        <div class="">
                            <!-- <a-button type="link" size="small">重新编辑</a-button>
                                <a-button type="link" size="small" danger>删除</a-button> -->
                            <a-button type="link" size="small" @click="operatingRecord(record)">操作记录</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
        </div>
        <Pagination :total="total" :page="formState.page" :size="formState.size" @changepage="changepage" />
        <ImportStaff ref="staffRef" />
    </div>
</template>

<style lang='scss' scoped>
.personnel-management {
    width: 100%;
    height: 100%;
    background: var(--fff-141414-color);
    padding: 15px;

    .search {
        display: flex;
        margin-bottom: 10px;
    }

    .personnel-container {
        flex: 1;
    }
}

.filter-key {
    position: relative;

    &:hover .select-fil {
        display: block;
    }

    .select-fil {
        // width: 200px;
        padding: 10px;
        display: none;
        background: var(--fff-141414-color);
        position: absolute;
        top: 32px;
        left: 0;
        z-index: 5;
        color: #000;
    }
}
</style>